<template>
  <div class="showinfo">
    <h1>姓名：{{ person.name }}</h1>
    <h1>年龄：{{ person.age }}</h1>
    <h1>地址：{{ person.address }}</h1>
    <ul>
      <li v-for="(item,index) in numbers">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "showInfo",
  // props的作用用于接收父组件传递过来的数据(自定义属性)
  // 比如：<showInfo :person="person" :numbers="numbers"></showInfoVue>
  // props就能接收到person、numbers两个自定义属性
  // props有两种写法一种是数组写法[数组写法不能限制类型、是否必填项、和props的默认值]，还有一种是对象写法[对象写法可以限制类型、是否必填项、和props的默认值]

  /*
    数组语法：
    props: ['person']
  */


  /*对象语法：*/
  props: {
    person: {
      type: Object, //类型限制
      required: true, //是否是必填项
      default: () => { //默认值
        return {name: "TPQ", age: 22, address: "湖南省"}
      },
    },
    numbers: {
      type: Array, //类型限制
      default: () => { //默认值
        return [5, 4, 3, 2, 1]
      }
    }
  }
}
</script>

<style>

</style>
